<!-- 用户资料更新界面： 基本设置-->
<template>
  <div id="base">
    <el-form :model="form" status-icon :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item prop="nickName" label="昵称 :" label-width="50px">
        <el-input v-model.trim="form.nickName" maxlength="10" show-word-limit></el-input>
      </el-form-item>

      <el-form-item prop="" label="介绍 :" label-width="50px">
        <el-input type="textarea" class="textarea" maxlength="100" placeholder="100字以内" rows="6"
            resize="none" v-model="form.info" show-word-limit></el-input>
      </el-form-item>

      <el-form-item label="性别 :" label-width="50px">
        <el-radio v-model="form.sex" v-for="(item, index) of ['男', '女', '保密']" :label="index"
            :key="index">{{ item }}</el-radio>
      </el-form-item>

      <el-form-item label="生日 :" label-width="50px">
        <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item label-width="50px">
        <el-button type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
export default {
  name: "UpdateBase",

  beforeMount() {
    let userId = this.$cookies.get('defaultUserId');
    let user = this.$cookies.get(userId);

    this.form.nickName = user.nickName;
    this.form.info = user.info;
    this.form.sex = user.sex;
    this.form.birthday = user.birthday;
  },

  data () {
    // 校验昵称格式
    let validateNickName = (rule, value, callback) => {
      // 正则： 2-10位汉字，数字，字母
      let re =  /[\u4e00-\u9fa5_a-zA-Z0-9_]{2,10}/;

      if(value === '') {
        callback(new Error('请输入昵称'));
      } else if(re.test(value)){
        callback();
      } else {
        callback(new Error('昵称2-10位汉字，数字或字母组成'));
      }
    };

    return {
      form: {
        nickName: '',
        info: '',
        sex: 0,
        birthday: '',
      },

      rules: {
        nickName: [
          {validator: validateNickName, trigger: 'blur'}
        ]
      },
    }
  },

  methods: {
    // 保存用户修改的 用户相关信息
    save () {
      let newUser = this.$cookies.get('user');

      newUser.nickName = this.form.nickName;
      newUser.info = this.form.info;
      newUser.sex = this.form.sex;
      newUser.birthday = this.form.birthday;

      this.$cookies.set('user', newUser);

      this.$message({
        showClose: true,
        message: '保存成功',
        type: 'success',
        center: true
      });
    }
  }
}
</script>

<style lang="less" scoped>
#base {}

.el-form {
  width: 400px;
  //background-color: lightgray;

  .a {
    color: red;
  }

  .textarea {
    .el-textarea__inner {
      resize: none;
    }
  }
}
</style>